<!-- 学员信息 -->
<template>
  <div>
    <el-card>
      <el-row>
        <el-form ref="form" :model="searchDto" inline label-suffix=":">
          <el-form-item label="关键字" prop="keywords">
            <el-input
              v-model="searchDto.keywords"
              placeholder="请输入关键字"
              style="width: 250px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="search"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-s-open" type="primary" @click="clear"
              >重置</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button @click="$router.go(-1)">返回</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <page-table
        ref="recovery"
        :page-data="pageData"
        :loading="loading"
        :do-get-page-data="getPageData"
      >
        <el-table-column type="index" label="编号" width="80" align="center" />
        <el-table-column prop="recoveryName" label="学员姓名" align="center" />
        <el-table-column prop="courses" label="课程名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.courses.join('、') }}
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" align="center">
          <template slot-scope="scope">
          <sz-badge
           :value="scope.row.age"
           :type="statusStyle(scope.row)"
          />
        </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="300" fixed="right">
          <template slot-scope="scope">
            <el-tooltip content="详情" placement="top">
              <el-button
                type="button"
                size="mini"
                icon="el-icon-search"
                @click="courseClick(scope.row)"
              >
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </page-table>
    </el-card>
    <!-- 审批 -->
    <el-dialog
      title="课程信息"
      :visible.sync="dialogVisible"
      width="30%"
      center
    >
      <el-form :model="form">
        <el-form-item label="课程总时间：" prop="sex"
          >{{ form.totalDay }}小时</el-form-item
        >
        <el-form-item>
          <!-- prop="courseMap" -->
          <el-card>
            <el-calendar v-model="calendarDate">
              <template slot="dateCell" slot-scope="{ date, data }">
                <div>
                  <p :class="data.isSelected ? 'is-selected' : ''">
                    {{ data.day.split("-").slice(1).join("-") }}
                    {{ data.isSelected ? "✔️" : "" }}
                    <!-- {{ dealMyDate(data.day) }} -->
                  </p>
              </div>
              </template>
            </el-calendar>
          </el-card>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "courseInfo",
  data() {
    return {
      sex: "",
      calendarDate:new Date(),//用于监听日历
      dialogVisible: false,
      pageData: {},
      loading: false,
      form: {},
      student: null,
      ageMap:{
        0:'6',
        1:'7',
        2:'8'
      },
      courseInfo: {
        applyId: null,
        year: 2023,
        month: 7,
      },
      searchDto: {
        institutionId: null,
        pageIndex: null,
        pageSize: null,
        keywords: null,
        age: null,
      },
    };
  },
  created(){
    console.log('this.$route.params.row;',this.$route.query.institutionId);
    this.searchDto.institutionId = this.$route.query.institutionId;
  },
  methods: {
    statusStyle(row){
      console.log('row:',typeof row);
      switch(row.age){
        case 6:
          return "warning";
        case 7:
          return "success";
        case 8:
          return "success";
      }
    },
    getPageData(val) {
      let tem = Object.assign(this.searchDto, val);
      this.API.getStusPageListByInstitutionId(tem).then((ret) => {
        console.log('list:',ret.data);
        this.pageData = ret.data;
      });
    },
    // 查询
    search() {
      this.getPageData();
    },

    //清空
    clear() {
      this.$refs.form.resetFields();
      this.getPageData();
    },
    courseClick(row) {
      console.log("row:", row);
      this.dialogVisible = true;
      this.courseInfo.applyId = row.id;
      this.getCourseData();
    },
    getCourseData() {
      this.API.getStuHourInfoInfoByApplyId(this.courseInfo).then((ret)=>{
        console.log('getCourseData:',ret);
        this.form = ret.data;
      })
    },
    // 日历签到
    dealMyDate(v) {},
    
    calendarOnClick(e){
      console.log('e:',e);
    }
  },
  watch:{
    value:{//监听月份变化
      handler(newValue,oldValue){
        console.log('handler:',newValue,oldValue)
      }
    }
  },
  mounted() {
    this.getPageData();

    // 监听日历上的月份按钮

  },
};
</script>
  <style scoped lang="scss"></style>  